import React, { PureComponent } from 'react'
/**
 * 高阶组件
 * 一个函数 接受一个组件作为参数 返回一个新的组件（函数）
 * 
 */


function hoc (Cpn) {
  // 1.类组件
  class NewHoc extends PureComponent {
    render () {
      return (
        // <div>啦啦啦</div>
        <Cpn {...this.props} age={18} />
      )
    }
  }
  // 2.函数组件
  /* function NewHoc (props) {
    return (<div>NewHoc</div>)
  } */
  return NewHoc;
}

class HelloWord extends PureComponent {
  render () {
    return (
      <div>HelloWord--{this.props.name}-- age:{this.props.age}</div>
    )
  }
}
const NewHelloWord = hoc(HelloWord);

export class App extends PureComponent {
  render () {
    return (
      <div>
        <p>App</p>
        {/* 一般使用 */}
        {/* <HelloWord /> */}
        {/* 高阶组件使用 */}
        <NewHelloWord name='hoc' />
      </div>
    )
  }
}

export default App